﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="BookList1.aspx.cs" Inherits="repeater_BookList1" %>

<%@ Register Assembly="zoyobar.shared.panzer.JQueryElement" Namespace="zoyobar.shared.panzer.ui.jqueryui.plusin"
	TagPrefix="je" %>
<%@ Register Assembly="zoyobar.shared.panzer.JQueryElement" Namespace="zoyobar.shared.panzer.web.jqueryui"
	TagPrefix="je" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
	<title>图书列表</title>
	<link rel="stylesheet" type="text/css" href="../css/smoothness/jquery-ui-1.8.15.custom.css" />
	<script type="text/javascript" src="../js/jquery-1.6.2.min.js"></script>
	<script type="text/javascript" src="../js/jquery-ui-1.8.15.custom.min.js"></script>
	<link rel="stylesheet" type="text/css" href="../css/main.css" />
	<style type="text/css">
		#list
		{
			background-color: #ffffff;
			width: 100%;
		}
		.cover
		{
			height: 100px;
			border: 1px solid #999999;
			color: #999999;
		}
		.bookname
		{
			font-size: large;
			font-weight: bold;
		}
		.price
		{
			color: #ff0000;
		}
		.author, .publisher
		{
			color: #0000cc;
		}
		.publishdate
		{
			color: #666666;
		}
		.rank
		{
			background-color: #cc0000;
			height: 15px;
			display: inline-block;
		}
		.rank1
		{
			width: 10px;
		}
		.rank2
		{
			width: 30px;
		}
		.rank3
		{
			width: 50px;
		}
		.rank4
		{
			width: 70px;
		}
		.rank5
		{
			width: 90px;
		}
		#pageindex
		{
			color: #009900;
			width: 20px;
		}
	</style>
	<script type="text/javascript">
		function convertDiscount(discount) {
			return discount < 0.7 ? '<strong>清仓啦</strong>' : '减价啦';
		}
	</script>
</head>
<body>
	<form id="formBookList1" runat="server">
	<div class="title purple-title">
		图书列表
		<iframe src="../about.htm" frameborder="0" height="160" width="100%" allowtransparency="true" scrolling="no"></iframe>
	</div>
	<div class="content">
		<h2>
			说明
		</h2>
		<blockquote>
			如果需要使用 Access 数据库, 请注释掉 repeater_webservice.cs 文件中的 #define XML.<br />
			<br />
			<strong>视频解说:</strong> <a href="http://www.tudou.com/programs/view/rwruM87J20s/"
				target="_blank">www.tudou.com/programs/view/rwruM87J20s/</a>
		</blockquote>
		<h2>
			示例
		</h2>
		<blockquote>
			<table id="list" cellpadding="5" cellspacing="5">
				<je:Repeater ID="bookRepeater" runat="server" Selector="'#list'" PageSize="4" IsVariable="true"
					FillAsync-Url="webservice.asmx" FillAsync-MethodName="FillBookList">
					<ItemTemplate>
						<tbody>
							<tr>
								<td rowspan="4" class="cover">
									封面图像 #{id}
								</td>
								<td colspan="2" class="bookname">
									#{bookname}
								</td>
							</tr>
							<tr>
								<td>
									<strong>原著:</strong> <span class="author">#{author}</span>
								</td>
								<td>
									<strong>出版社:</strong> <span class="publisher">#{publisher}</span>
								</td>
							</tr>
							<tr>
								<td>
									<strong>定价:</strong> <span class="price">#{price}</span>
								</td>
								<td>
									<strong>折扣:</strong> #{discount,Math.floor(# * 100) / 10} 折 #{discount,convertDiscount(#)}
								</td>
							</tr>
							<tr>
								<td>
									<strong>出版日期:</strong> <span class="publishdate">#{publishdate,jQuery.panzer.formatDate(#,'yyyy年MM月dd号')}</span>
								</td>
								<td>
									<strong>评价:</strong> #{rank} <span class="rank rank#{rank}"></span>
								</td>
							</tr>
						</tbody>
					</ItemTemplate>
					<FooterTemplate>
						<tfoot>
							<tr>
								<td colspan="2">
									<a href="#" je-onclick="prev">上一页</a>&nbsp;&nbsp;<a href="#" je-onclick="next">下一页</a>,&nbsp;
									第 @{pageindex}/@{pagecount} 页, 共 @{itemcount} 条, <a href="#" je-onclick="goto,new Number(jQuery('#pageindex').val())">
										跳转</a> 到第
									<input type="text" id="pageindex" value="@{pageindex}" />
									页.
								</td>
							</tr>
						</tfoot>
					</FooterTemplate>
				</je:Repeater>
			</table>
		</blockquote>
	</div>
	</form>
</body>
</html>
<script type="text/javascript">
	$(function () {
		bookRepeater.__repeater('fill');
	});
</script>
